<script>
import { reactive, ref, toRefs } from '@vue/reactivity';
import { getData } from "../assets/api/home"
import { useRoute, useRouter } from 'vue-router';
import { getvideoData } from "../assets/api/video"
export default {
    setup() {
        let router = useRouter()
        // 为你推荐数据
        let route = useRoute()
        // 接受的id值
        let id = ref(route.query.id)
        let banner = reactive({
            // 轮播图
            bannerList: null,
            // 轮播图下面的tab
            menuList: null,
            // tab下面的动图
            tabImg: null,
            // 精选课程
            hotClass: null,
            video: ""
        });
        //返回
        let back = () => {
            router.push({
                path: "/video"
            })
        }


        let getDataFun = () => {
            getData().then((data) => {
                // 轮播图
                banner.bannerList = data.data.results.body.sybnList
                // 轮播图下面的tab
                banner.menuList = data.data.results.body.menuList
                // 精选课程
                banner.hotClass = data.data.results.body.netList
                // tab下面的动图
                banner.tabImg = data.data.results.body.syzwList
            })
            getvideoData().then((res) => {
                // console.log(res.data.data.response.videos);
                // banner.video = res.data.data.response.videos[13].play_url
                banner.video = res.data.data.response.videos[id.value]
                // console.log(banner.video);
            })
            // console.log(id.value,1111);
        }

        getDataFun()

        //界面跳转
        let navigate = (id) => {
            // console.log(id);
            router.push({
                path: "/netshop",
                query: {
                    key: id
                }
            })
            // console.log(router);

        }
        //返回
        let goback = ()=>{
            router.go(-1)
        }

        let player = ref(false)
        let pause = ()=>{
            // console.log("暂停");
            player.value = false
        }
        let play = ()=>{
            // console.log("播放");
            player.value = true
        }

        return {
            ...toRefs(banner),
            navigate,
            back,
            goback,
            id,
            player,
            pause,
            play
           
        }
    },
}
</script>


<template>
    <div class="container">
        <div class="back">
            <div class="video">
                <meta name="referrer" content="no-referrer" />
                <video autoplay v-on:play="play" v-on:pause="pause" height="100%" controls :src="video.play_url"></video>
            </div>
            <div :class="['title',player?'con':'']"><i @click="goback"></i><span>{{video.title}}</span></div>
            <div class="tuijianclass">
                <div class="left"></div>
                <div class="right"></div>
            </div>

            <!-- 为你推荐数据 -->
            <div @click="navigate(item.key)" class="box-course" v-for="(item, index) in hotClass" :key="index">
                <div class="course">
                    <div class="titles">
                        <i><img :src="item.sellingPointImg" alt=""></i>
                        <h6 :style="{ color: item.sellingPointColor }">{{ item.sellingPoint }}<span></span></h6>
                    </div>

                    <div class="center">
                        <img :src="item.img" alt="" />

                        <span>{{ item.netSubjectName }}<i></i></span>

                        <div class="text">
                            <h4>{{ item.title }}</h4>
                            <h6>{{ item.liveTime }} | {{ item.period }}课时</h6>

                            <h5>{{ item.teacher }}</h5>
                        </div>
                    </div>


                    <div class="footer">
                        <h6>已购{{ item.buyers }}</h6>
                        <span></span>
                        <h6 class="text2" v-if="item.limitBuyers">限购{{ item.limitBuyers }}</h6>
                        <h5 v-if="item.price"><span>¥{{ item.price }}</span>¥{{ item.disprice }}</h5>
                        <h5 v-if="!item.price">免费</h5>
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>

<style lang="scss">
@import url(../assets/css/base.css);
/* 动画关键帧 */
        @keyframes box {
            0% {
                top: 0px;
            }

            100% {
                top: -60px;
            }
        }
        @keyframes box2 {
            0% {
                top: -60px;
            }

            100% {
                top: 0px;
            }
        }
.back {
    background-color: #f4f3f8;
    width: 100%;
    .video {
        height: 233px;
        border-top: 1px solid #d5d5d5;
        border-bottom: 1px solid #d5d5d5;
        position: relative;

        i {
            width: 30px;
            height: 30px;
            background: url(../assets/img/back.png) no-repeat center center;
            background-size: 30px 30px;
            position: absolute;
            top: 10px;
            left: 0px;
            z-index: 99999;
        }

        video {
            height: 100%;
            width: 100%;
        }
    }

    .title {
        display: flex;
        width: 100%;
        align-items: center;
        color: white;
        position: absolute;
        top: 0;
        font-size: 16px;
        z-index: 14;
        overflow: hidden;
        text-overflow: ellipsis;
        background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0, #000 100%);
        margin-top: 12px;
        word-break: break-all;
        height: 50px;
        animation: box 1s 1 linear alternate-reverse  both;
        span{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            // animation: box 1s 1 linear alternate-reverse  both;
        }
        i{
            position: relative;
            top: -60px;
            // display: block;
            width: 30px;
            height: 30px;
            background: url(../assets/img/back1.png) no-repeat center center;
            background-size: 30px 30px;
            animation: box 1s 1 linear alternate-reverse  both;
        }
        &.con{
            // display: none;
            position: absolute;
            top: -60px;
            animation: box2 1s 1 linear alternate-reverse  both;
           
        }
    }

    .tuijianclass {
        margin-top: 5px;
        height: 40px;

        .left {
            margin-left: 15px;
            height: 40px;
            width: 90px;
            background: url(../assets/img/tuijianclass.png)no-repeat center center;
            background-size: 100%;
        }
    }

    .course {
        margin: 0px 15px 15px 15px;
        box-shadow: 0px 3px 8px #c4c4c4;
        border-radius: 8px;
        display: flex;
        flex-direction: column;

        .titles {
            margin-top: 7px;
            margin-left: 5px;
            height: 32px;
            display: flex;
            align-items: center;
            background-image: linear-gradient(to right, #f9f9f9, #fff);
            border-radius: 10px;

            i {
                // background-image: url(../assets/img/base3/tongyong-icon.png);
                background-size: 22px 22px;
                width: 22px;
                height: 22px;
                margin: 0px 11px;
            }

            &>h6 {
                display: flex;
                height: 32px;
                align-items: center;
                font-weight: bold;

                span {
                    width: 3px;
                    height: 3px;
                    border-radius: 1px;
                    background-color: #211d11;
                    align-items: center;
                    margin: 0 5px;
                }

                &:last-child {
                    span {
                        background-color: transparent;
                    }
                }
            }
        }

        .center {
            margin-left: 15px;
            margin-top: 10px;
            display: flex;
            position: relative;

            span {
                position: absolute;
                top: 0px;
                left: 0px;
                display: block;
                width: 92px;
                height: 20px;
                line-height: 20px;
                color: #fffdff;
                font-size: 12px;
                text-align: center;
                font-weight: bold;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                background-color: #c2c9d9;

                i {
                    position: absolute;
                    top: 20px;
                    left: 0px;
                    width: 10px;
                    height: 10px;
                    background-size: 10px 10px;
                    // background-image: url(../assets/img/base3/下载.png);
                }
            }

            img {
                width: 120px;
                height: 90px;
                border-radius: 10px;
            }

            .text {
                display: flex;
                flex-direction: column;
                margin: 0 15px 0 15px;

                h4 {
                    font-weight: bolder;
                }

                h6 {
                    color: #c3c3c5;
                    height: 30px;
                    line-height: 30px;
                }

                h5 {
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    color: #c3c3c5;

                    i {
                        // background-image: url(../assets/img/base3/head.jpg);
                        background-size: 25px 25px;
                        width: 25px;
                        height: 25px;
                        margin-right: 5px;
                    }
                }
            }
        }
    }

    .footer {
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        margin-left: 15px;

        h6 {
            color: #949597;
        }

        span {
            margin: 0px 8px;
            color: #949597;
            width: 2px;
            height: 10px;
            background-color: #f1f0ee;
        }

        .text2 {
            flex: 1;
        }

        h5 {
            margin-right: 14px;
            font-size: 16px;
            font-weight: bold;
            color: #f84108;

            span {
                font-size: 12px;
                text-decoration: line-through
            }
        }
    }
}
</style>